<template>
  <div class="cms-card" :class="`style_${type}`">
    <!--  -->
    <div class="video-card">
      <div class="img-container">
        <img v-if="type === 1" src="../../assets/img/yujunchuxiangshi.webp" alt="" class="img-show" />
        <div v-if="type === 1" class="des flex-1">
          <p class="text-base text-[#ffffff] font-medium mt-[47px]">与君初相识</p>
          <p class="scale-95 text-xs text-[#ffffff] mt-2">2022·内地·古装</p>
          <p class="scale-95 text-xs text-[#ffffff] mt-2 break-words">
            迪丽热巴 / 吴磊 / 古装爱情 / 甜虐爱 情 / 女性成长
          </p>
          <p class="scale-95 text-xs text-[#999999] mt-2">与君初相识，恰似故人归</p>
        </div>
        <img
          v-if="type !== 1"
          :src="type === 2 ? `${baseUrl}/assets/img/zhuqinghao.webp` : `${baseUrl}/assets/img/sniper.webp`"
          class="img-show"
          alt=""
        />
        <sound-outlined v-if="type !== 1" class="sound" />
      </div>
      <div v-if="type === 1" class="bottom-des">
        <div class="leading-[34px] scale-95 text-white">
          <undo-outlined class="card-icon mr-0" />
          重播
        </div>
        <i class="flex-1"></i>
        <div class="star">
          <star-outlined class="card-icon" />
          <span class="scale-95">收藏</span>
        </div>
        <div class="play">
          <play-circle-outlined class="card-icon" />
          <span class="scale-95">看正片</span>
        </div>
      </div>
      <div v-if="type !== 1" class="bottom-des">
        <div class="content-des">
          <img
            :src="type === 2 ? `${baseUrl}/assets/img/zhuqinghao2.webp` : `${baseUrl}/assets/img/sniper2.webp`"
            class="small-img"
            alt=""
          />
          <div class="flex-1">
            <p class="text-base text-[#fff] font-medium">{{ type === 2 ? '祝卿好' : '狙击手' }}</p>

            <span class="text-xs scale-95 mt-1 text-white">{{
              type === 2 ? '袁冰妍 / 郑业成 / 古装爱情 ' : '章宇/张译/热血战争'
            }}</span>
          </div>
          <div class="star">
            <star-outlined class="card-icon" />
            <span class="scale-95">收藏</span>
          </div>
        </div>
        <div class="other-des">
          {{ type === 2 ? '敬业！袁冰妍拍戏刚杀青就去录制现场' : '帅气！章宇变身狙击战神！' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import cmsCardViewProps from './props'
import { UndoOutlined, PlayCircleOutlined, StarOutlined, SoundOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsCardViewProps,
  setup() {
    const baseUrl = '/src/components/cms/components/src'
    return {
      baseUrl
    }
  },
  components: {
    UndoOutlined,
    PlayCircleOutlined,
    StarOutlined,
    SoundOutlined
  }
})
</script>
<style scoped lang="less">
.cms-card {
  width: 375px;
  padding: 8px 16px;
  background-color: #fff;
}
.card-icon {
  margin-right: 5px;
  @apply text-[#fff] text-sm self-center scale-95;
}
&.style_1 {
  .video-card {
    background-image: radial-gradient(circle at 50% 0%, rgba(54, 41, 36, 0.9) 0%, #29201f 100%);
    border-radius: 8px;
  }
  .img-container {
    margin: 0 16px 0 16px;
    @apply flex flex-wrap gap-x-4;
    padding-bottom: 28px;
  }
  .img-show {
    width: 107px;
    height: 150px;

    @apply rounded-lg object-cover mt-5;
  }
  .bottom-des {
    border-top: 1px solid rgba(151, 151, 151, 0.14);

    @apply flex flex-wrap p-4;
  }
  .star,
  .play {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 27px;
    line-height: 27px;
    color: #ffffff;
    padding: 0 14px;
    align-self: center;
  }
  .star {
    margin-right: 8px;
  }
}
&.style_2 {
  .video-card {
    background-image: radial-gradient(circle at 50% 0%, rgba(54, 41, 36, 0.9) 0%, #29201f 100%);
    border-radius: 8px;
  }
  .img-container {
    padding: 0;
    margin: 0;
    border-radius: 8px 8px 0 0;
    position: relative;
  }
  .img-show {
    width: 100%;
    height: 165px;
    border-radius: 8px 8px 0 0;

    object-fit: cover;
  }
  .sound {
    position: absolute;
    right: 16px;
    bottom: 12px;
  }
  .content-des {
    @apply p-4 pt-2 pb-2 flex;
    .small-img {
      width: 34px;
      height: 48px;
      object-fit: cover;
      border-radius: 8px;
      margin-right: 12px;
    }
    .star {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 27px;
      line-height: 27px;
      color: #ffffff;
      padding: 0 14px;
      border-radius: 27px;
      align-self: center;
    }
  }
  .other-des {
    padding: 8px 0 8px 16px;
    border-top: 1px solid rgba(151, 151, 151, 0.14);
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
  }
}
&.style_3 {
  .video-card {
    background: #20242c;
    border-radius: 8px;
  }
  .img-container {
    padding: 0;
    margin: 0;
    border-radius: 8px 8px 0 0;
    position: relative;
  }
  .img-show {
    width: 100%;
    height: 193px;
    border-radius: 8px 8px 0 0;

    object-fit: cover;
  }
  .sound {
    position: absolute;
    right: 16px;
    bottom: 12px;
  }
  .content-des {
    height: 65px;
    @apply p-4 pt-2 pb-0 flex;
    .small-img {
      width: 46px;
      height: 65px;
      object-fit: cover;
      border-radius: 8px;
      margin-right: 12px;
      position: relative;
      top: -20px;
    }
    .star {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 27px;
      line-height: 27px;
      color: #ffffff;
      padding: 0 14px;
      border-radius: 27px;
      align-self: center;
    }
  }
  .other-des {
    padding: 12px 0 12px 16px;
    border-top: 1px solid rgba(151, 151, 151, 0.14);
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
  }
}
</style>
